<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
import type { resultProps, TabsPaneContext } from 'element-plus'
import * as echarts from 'echarts';
import api from "../api/index.js"



const activeName = ref('first');  // 控制选中的标签页

// 初始化图表函数
const initChart = async (chartId, option) => {
  const chartDom = document.getElementById(chartId);
  const myChart = echarts.init(chartDom);
  myChart.setOption(option);
};

// 加载所有图表
const loadCharts = async () => {
  await nextTick();
  // 加载第一个图表
  let result1 = await api.get("/api/chart/tickets");
  let weekTime = await api.get("/api/chart/week");
  initChart('echart1', {
    title: { text: '售票收入' },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: weekTime.data },
    yAxis: { type: 'value' },
    series: [{
      name: '收入',
      type: 'line',
      data: result1.data,
      lineStyle: {
        width: 2,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#ff7f50' },
            { offset: 0.5, color: '#87cefa' },
            { offset: 1, color: '#32cd32' }
          ],
        },
      },
      itemStyle: { color: '#ff6347' },
    }],
  });

  // 加载第二个图表
  let result2 = await api.get("/api/chart/attracts");
  const pieData = result2.data.map(item => ({
    value: item.fee,
    name: item.name
  }));
  initChart('echart2', {
    tooltip: { trigger: 'item' },
    legend: { top: '5%', left: 'center' },
    series: [{
      name: '设备费用',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      startAngle: 180,
      endAngle: 360,
      data: pieData,
    }]
  });
};

onMounted(() => {
  loadCharts();  // 页面加载时初始化所有图表
});

// const refreshChart=()=>{
//   loadCharts();
// }

</script>
<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="loadCharts">
    <el-tab-pane label="售票收入" name="first" :key='activeName'>
      <div class="backFrame">
        <div id="echart1" style="width: 100%; height: 400px;" v-if="key='activeName'"></div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="设施费用" name="second" :key='activeName'>
      <div class="backFrame">
        <div id="echart2" style="width: 100%; height: 400px;" v-if="key='activeName'"></div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<style>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.backFrame {
  height: auto;
  overflow: auto;
  margin-bottom: 20px;
  border-radius: 20px;
  /* 圆角半径 */
  margin-top: 20px;
  /* 上方间距 */
  padding: 10px;
  /* 内间距，确保内容不会紧贴边缘 */
  background-color: rgba(255, 255, 255, 0.8);
  /* 可选：设置背景颜色 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  /* 可选：添加阴影以提高视觉效果 */
}
</style>